<!--vue模板-->
<template>
  <!--添加按钮-->
  <div style="text-align: right">
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="saveOrUpdate()"
      >添加</el-button
    >
  </div>

  <!--表格数据 -->
  <el-table :data="tableData" style="width: 100%" stripe border>
    <el-table-column
      type="index"
      label="序号"
      width="80"
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="code"
      label="编码"
      header-align="center"
      width="180"
    />
    <el-table-column
      prop="name"
      label="名称"
      header-align="center"
      width="180"
    />
    <el-table-column
      prop="sorts"
      label="排序"
      header-align="center"
      width="120"
    />
    <el-table-column prop="note" label="备注" header-align="center" />

    <el-table-column
      label="操作"
      width="180"
      header-align="center"
      align="center"
    >
      <template v-slot="{ row }">
        <el-button type="primary" @click="saveOrUpdate(row)">修改</el-button>
        <el-button type="danger" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <el-pagination
    @current-change="pagechange"
    @size-change="chgsize"
    @update:page-size="pageSize"
    class="page"
    background
    layout="total,sizes, prev, pager, next,jumper"
    :total="total"
    :page-size="pageSize"
    :page-sizes="[10, 20, 50, 100]"
  />

  <!--保存或修改对话框-->
  <save-or-update
    v-model:visible="isShowDialog"
    @refreshData="initData"
    ref="saveupdate"
  ></save-or-update>
</template>

<!--vue 组件选项定义-->
<script>
import SaveOrUpdate from "./SaveOrUpdate.vue";
export default {
  data() {
    return {
      tableData: [],
      page: 1, //默认显示第一页数据
      pageSize: 10, //默认一页显示的记录数
      total: 0, //默认总记录数
      isShowDialog: false, //是否显示保存对话框
    };
  },
  props: {
    parentId: {
      type: String,
      default: "",
    },
  },

  //侦听属性变化
  watch: {
    parentId: {
      handler: function (val) {
         //更新当前数据  
         this.initData();
      },
    },
  },

  //注册组件
  components: {
    SaveOrUpdate,
  },
  methods: {
    initData() {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        pid:this.parentId
      };
      this.$http.post("/api/dict/child", data).then((res) => {
        //判断接口数据是否正常
        if (res.code == 200) {
          this.tableData = res.result.data;
          this.page = res.result.page;
          this.pageSize = res.result.pageSize;
          this.total = res.result.total;
        }
      });
    },

    //修改用户
    saveOrUpdate(row) {
      this.isShowDialog = true;
      this.$refs.saveupdate.init(2, row,this.parentId);
    },
    //删除方法
    del(id) {
      this.$confirm("你确定要删除吗?", "提示")
        .then((res) => {
          this.todel(id);
        })
        .catch((err) => {});
    },
    todel(id) {
      this.$http.get("/api/dict/delete", { id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          //重新加载数据
          this.initData();
        }
      });
    },

    //页数改变
    pagechange(page) {
      this.page = page;
      this.initData();
    },

    //每页条数改变
    chgsize(pgsize) {
      //当每页记录数变化时，总页数跟着改变
      this.page = 1; //必须从第1页开始查
      this.pageSize = pgsize;
      this.initData();
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.page {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
}

.label {
  margin-left: 20px;
  margin-right: 20px;
  color: #666;
  font-weight: bold;
}

.el-row {
  margin: 15px 0;
}

.el-row .el-col-12 div span {
  color: #666;
  font-weight: bold;
  margin: 0 20px;
}

.el-row .el-col-24 div span {
  color: #666;
  font-weight: bold;
  margin: 10px 20px;
}
</style>
